import Dep from "./dep.js";
/**
 * obj： 要监听的对象
 * key： 要监听对象中的属性
 * val： 在函数体内部形成闭包，作为中间变量实现数据的返回
 * cb： 回调函数
 **/
function defineReactive(obj, key, val, cb) {
  const dep = new Dep();
  Object.defineProperty(obj, key, {
    get() {
      console.log("获取数据");
      // 在get方法中收集依赖
      dep.depend();
      return val;
    },
    set(newValue) {
      if (newValue === val) return;
      console.log('new :>> ', newValue);
      const oldValue = val;
      val = newValue;
      console.log("修改数据");
      /*订阅者收到消息的回调*/
      cb ? cb() : null;
      // 在set方法中通知依赖更新，并且传入新值
      dep.notify(newValue, oldValue);
    },
  });
}

// // 遍历数据将data中每一个对象变成可观察的observe
// function observe(value, cb) {
//   Object.keys(value).forEach((key) => {
//     return defineReactive(value, key, value[key], cb);
//   });
// }

// observer/index.js
export function observer(value, cb) {
  let ob = new Observer(value);
  return ob;
}

// src/observer/index.js
export class Observer {
  // 这里的value刚开始时，实际上就是data
  constructor(value) {
    this.dep = new Dep();
    this.walk(value);
  }
  // walk走你，这个方法用来遍历value给每个key下面都加上一个getter setter属性变成可观察的
  walk(value) {
    Object.keys(value).forEach((key) => defineReactive(value, key, value[key]));
  }
}
